<template>
  <div>
    <el-tag class="tag">webworker</el-tag> <br />
    <!-- <div class="worker-box">
      <el-button @click="handleWorker">worker</el-button>
    </div> -->
    <el-tag class="tag">mutationObserver</el-tag> <br />
    <el-button @click="handleDomChange">change</el-button>
    <div class="mu-box"></div>
    <el-tag class="tag">使用 queueMicrotask 创建微任务</el-tag> <br />
    <div>
    </div>
    <el-tag class="tag">requestAnimationFrame</el-tag> <br />
    <el-button size="mini" type="primary" @click="getAnimation">go!</el-button>
    <div class="an-box-group">
      <div class="an-box1">定时器动画</div>
      <div class="an-box2">动画帧</div>
    </div>
    <div class="re-box-group">
      <el-button @click="handleAnimation">requestAnimationFrame test</el-button>
      <div class="re-box">box</div>
    </div>
  </div>
</template>
<script>
// import Worker from "@/assets/js/test.worker.js"
import WorkerOne from "@/assets/js/one.worker.js"
import WorkerTwo from "@/assets/js/two.worker.js"

export default {
  name: 'HtmlBean',
  data() {
    return {

    }
  },
  mounted() {
    // document.addEventListener('visibilitychange', this.handleVisibleChange)
    /**
     * 使用 worker 进行异步操作
     */
    // const worker = new Worker();
    const workerOne = new WorkerOne();
    const workerTwo = new WorkerTwo();
    /**
     * 
     * messageChanner
     */
     const {port1,port2} = new MessageChannel();
    
    
    // 主线程向worker发送消息
    // worker.postMessage('test ok?')
    workerOne.postMessage('one??', [port1])
    workerTwo.postMessage('two?',[port2])
    // workerOne.postMessage('main said to one')
    // workerTwo.postMessage('main said to two')
    
    

    //接收消息
    // worker.onmessage = (e) => {
    //   console.log('Title-Main:get msg from worker', e.data)
    // }
    workerOne.onmessage = (e) => {
      console.log('main get msg:', e.data)
    }
    workerTwo.onmessage = (e) => {
      console.log('main get msg:', e.data)
    }
    /**
     * 使用 MutationObserver 监听 dom 变化
     */
    const target = document.querySelector('.mu-box');
    const observer = new MutationObserver((mutation) => {
      console.log('mutation', mutation)
      console.log('change')
    })
    observer.observe(target, {
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true
    })
  },
  beforeDestroy() {
    // this.worker.terminate();
  },
  methods: {
    handleWorker() {
      const worker = new Worker()
      worker.onmessage = (e) => {
        console.log('worker onmessage', e.data)
      }
      // 主线程向worker发送消息
      worker.postMessage('vue hello from mian thread');
      // window.addEventListener('message', (e) => {
      //   console.log('get from workerxzs', e.data)
      // })
    },
    handleDomChange() {
      const target = document.querySelector('.mu-box');
      target.innerHTML = 'change'
      target.style.backgroundColor = 'lightpink'
    },
    /**
     * 监听页面的可视事件，切换标签或者最小化
     */
    handleVisibleChange(e) {
      console.log('handleVisibleChange', e.target.visibilityState)
      console.log('doucument.hidden?', document.hidden)
    },
    handleAnimation() {
      let box = document.querySelector('.re-box');
      box.style.left = "0px";
      const cb = () => {
        let leftVal = parseInt(box.style.left);
        if(leftVal<500) {
          box.style.left = leftVal + 1 + 'px';
          window.requestAnimationFrame(cb);
        }
      }
      window.requestAnimationFrame(cb);
    },
    getAnimation() {
      console.log('requestAnimation', window,requestAnimationFrame)
      // 动画思路：不断修改dom元素的left值，使其运动起来（动画）
      let box1 = document.querySelector('.an-box1');
      let box2 = document.querySelector('.an-box2');
      this.setIntervalFn(box1);
      this.requestAnimationFrameFn(box2);

    },
    setIntervalFn(box1) {
      let timer = null
			box1.style.left = '0px'
			timer = setInterval(() => {
				let leftVal = parseInt(box1.style.left)
				if (leftVal >= 720) {
					clearInterval(timer)
				} else {
					box1.style.left = leftVal + 1 + 'px'
				}
			}, 17)
    },
    requestAnimationFrameFn(box2) {
      // let timer = null
			box2.style.left = '0px'
      function callbackFn() {
				let leftVal = parseInt(box2.style.left)
				if (leftVal >= 720) {
					
				} else {
					box2.style.left = leftVal + 1 + 'px'
					window.requestAnimationFrame(callbackFn)
				}
			}
			window.requestAnimationFrame(callbackFn)
    }
  }
}
</script>
<style scoped>
  .tag {
    margin: 20px 0px;
  }
  .an-box1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top:40px
  }
  .an-box2 {
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top:140px;
  }
  .an-box-group {
    position: relative;
    width:100%;
    height: 300px;
  }
  .re-box-group {
    position:relative;
    width:100%;
    height:200px;
  }
  .re-box {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    position: absolute;
    top:50px;
  }
  .mu-box{
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>@/assets/js/test.worker.js